<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				width: 650px;
				height: 80px;
				border-collapse: collapse;
			}
			
			table tr {
				width: 40px;
				height: 30px;
			}
			
			#ipt {
				width: 1px;
				height: 10px;
			}
			
			table th,
			td {
				border: solid 1px red;
			}
			
			#del {
				cursor: pointer;
				color: red;
			}
			
			#edit {
				cursor: pointer;
				color: blue;
			}
		</style>
	</head>

	<body>
		<!--用户名-->
		<div id="user">
			<label>
						用户名:<input type="text" value="张倩" placeholder="请输入姓名" />
					</label>
			<br />
			<label>
						年龄:<input type="number" value=0 />
					</label>
			<br/>

		</div>
			<label id="sex">男:
						<input type="radio" name="sex" value=0 checked />
					</label>
			<label>女:
						<input type="radio" name="sex" value=1  />
					</label>

		<br/>
		<!--爱好-->
		<div id="hobby">
			爱好：
			<br/>
			<label>
						运动 <input type="checkbox" value="h1" />
					</label>
			<label>
						逛街 <input type="checkbox" value="h2" />
					</label>
			<label>
						看书<input type="checkbox" value="h3" />
					</label>
			<label>
						k歌 <input type="checkbox" value="h4" />
					</label>
			<label>
						睡觉<input type="checkbox" value="h5" />
					</label>

		</div>

		<br />

		<!--全选框-->
		<lable id="all">
			<input type="checkbox" id="checkAll"></input>全选/全不选
		</lable>
		<button type="button" id="notCheck">反选</button>

		<br />
		<br />
		<!--下拉列表-->
		<br />喜欢吃的实物
		<select id="foods">
			<option value="f1">火锅</option>
			<option value="f2">榴莲</option>
			<option value="f3">蛋糕</option>
			<option value="f4">寿司</option>
			<option value="f5">川菜</option>
		</select>

		<br />
		<!--添加按钮-->
		<button type="button" onclick="add()">添加</button>

		<br />
		<br />
		<!--表格：用于渲染-->
		<table>
			<thead>
				<tr>
					<th>姓名(user)</th>
					<th>年龄(age)</th>
					<th>性别(sex)</th>
					<th>爱好</th>
					<th>喜欢的食物</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<!--<tr>
					<td>张倩</td>
					<td>24</td>
					<td>小姐姐</td>
					<td>运动，逛街，看书，k歌，睡觉</td>
					<td>火锅</td>
					<td>
						<a id="edit">编辑</a>
						<a id="del">删除</a>
					</td>
				</tr>-->
			</tbody>
		</table>

		<script type="text/javascript">
			//添加
			//
			var arr = [];          //用于存放表单中的数据
			function add() {       //调用add()这个函数
				//获取dom对象
				var userIpts = document.querySelectorAll("#user>label>input")
				//console.log("userIpts:", userIpts);
				//获取所有数据的值
				var user=userIpts[0].value;
				var age=userIpts[1].value;
				var foodsOption=document.querySelector("#foods>option");
				var foods = foodsOption.value;
				//创建一个对象
				var obj = {
				    user:user,
				    age:age,
				    sex:sex,
				    foods:foods
				    hobby:hobby,
				}
				//将对像添加在数组中
				arr.push(obj);
				showPage(arr);  //调用下边的函数
			}
			
			
			//获取用户的选取的爱好
			function getUserHobby(){
				var hobbyIpts=document.querySelectorAll("#hobby>label input");
				//console.log("hobbyIpts",hobbyIpts);
				var hobby=[];
				for(var i=0;i<hobbyIpts.length;i++){
					if(hobbyIpts[i].checked){
						hobby.push(hobbyIpts[i].value);
					}
				}
				return hobby;
			}
			
			
			 function showPage(arr){
				var tbody = document.getElementById("tbody");
				tbody.innerHTML="";
				var str = "";
				for (var i=0;i<arr.length;i++) {
					str +=`
					<tr>
					<td>${arr[i].user}</td>
					<td>${arr[i].age}</td>
					<td>${arr[i].sex==0?"小哥哥":"小姐姐"}</td>
					<td>${arr[i].hobby}</td>
					<td>${arr[i].foods}</td>
					<td>
						<a id="edit">编辑</a>
						<a id="del">删除</a>
					</td>
				</tr>
					`;
				}
				tbody.innerHTML=str;
			}
			

			//全选\全不选

			//1、先获取当前（全选全不选）选择框的DOM对象
			//2、创建点击事件赋值给一个函数，声明一个变量并赋值为调用当前选择框this.checked
			//3、获取爱好里的每一个选择框节点
			//4、创建一个循环，让循环里的每一个选择框被调用（被选中）；
			var checkAll = document.getElementById("checkAll");
			checkAll.onclick = function() {
				//console.log("this:",this);
				var c = this.checked;
				//console.log("c:",c);
				var ipts = document.querySelectorAll("#hobby>label>input");
				//console.log(ipts);
				for(var i = 0; i < ipts.length; i++) {
					ipts[i].checked = c;
				}
			}
			//反选
			//选中的复选框取反，其余跟上边的一样
			var notCheck = document.getElementById("notCheck");
			notCheck.onclick = function() {
				var ipts = document.querySelectorAll("#hobby>label>input");
				for(var i = 0; i < ipts.length; i++) {
					ipts[i].checked = !ipts[i].checked; //当前这个复选框取反
				}
			}
			//所有选项都选上全选才被选中（是否需要选中）
			//1、获取所有选项的节点
			//？？？？
			var ipts = document.querySelectorAll("#hobby>label>input");
			for(var j = 0; j < ipts.length; j++) {
				ipts[j].onclick = function() {
					fn1();
				}
			}
			function fn1() {
				var f = true;
				for(var i = 0; i < ipts.length; i++) {
					if(!ipts[i].checked) {
						var f = false;
						break;
					}
				}
				checkAll.checked = f;
			}
			//渲染页面
			var tbody = document.getElementById("tbody");
			tbody.innerHTML = "";
			var str = "";
			for(var i = 0; i < arr.length; i++) {
				str += `
				<tr>
					<td>${arr[0].id}</td>
					<td>${arr[i].age}</td>
					<td>${arr[i].sex==0?"小哥哥":"小姐姐"}</td>
					<td>${arr[i].hobby}</td>
					<td>${arr[i].foods}</td>
					<td>
						<a id="edit">编辑</a>
						<a id="del">删除</a>
					</td>
				</tr>
				`
				tbody.innerHTML =str;
			}
		</script>
	</body>

</html>